
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
        <a id="download_code" href="javascript:" style="display: none;">下载二维码</a>
        <div class="col-xs-12">
            <div class="input-group" style="display: none;">
                <input id="c-image" data-rule="required" class="form-control hidden" size="50" name="row[image]" type="text" value="{$row.image|htmlentities}">
                <input id="rimage"  class="form-control hidden"  name="row[image_info]" type="text" value="{$row.image_info|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                <!--    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    <span><button type="button"  class="btn btn-primary btn-success"  onclick="addqr()" ><i class="fa fa-qrcode"></i>二维码</button></span>-->
                            <span><button type="button"  class="btn btn-primary btn-success"  id="share-btn" ><i class="fa fa-qrcode"></i>保存海报</button></span>
                </div>
                <span class="msg-box n-right" for="c-image" ></span>

            </div>
            <ul class="row list-inline faupload-preview" id="p-image" data-template="preview1tpl" style="display: none;"></ul>


                <div id="poster-container" style="position: absolute;"><img   class="poster"  style="width: 640px !important; display: none;" src="{$row.image|cdnurl|}"  class="img-responsive"> </div>





            <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
            <script src="__CDN__/assets/libs/html2canvas.min.js"></script>
            <script src="__CDN__/assets/libs/qrcode.min.js"></script>
            <script  type="text/javascript">
                var image_info=$('#rimage').val()?JSON.parse($('#rimage').val()):{share:"霸屏同城",width:"220px",height:"220px",top:"0",left:"0"};

                var share_url='{$url}'
                $(function () {
                    if(image_info.share)
                    {
                        addqr();
                    }
                });

                $(document).ready(function(){
                /*    $("#share-btn").on("click", function () {
                        var getPixelRatio = function (context) { // 获取设备的PixelRatio
                            var backingStore = context.backingStorePixelRatio ||
                                context.webkitBackingStorePixelRatio ||
                                context.mozBackingStorePixelRatio ||
                                context.msBackingStorePixelRatio ||
                                context.oBackingStorePixelRatio ||
                                context.backingStorePixelRatio || 0.5;
                            return (window.devicePixelRatio || 0.5) / backingStore;
                        };
                        //生成的图片名称
                        var imgName = "share.jpg";
                        var shareContent = document.getElementById("poster-container");
                        /!*var width = shareContent.offsetWidth;
                        var height = shareContent.offsetHeight;*!/
                        var canvas = document.createElement("canvas");
                        var context = canvas.getContext('2d');
                        /!*var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
                        canvas.width = width * scale;
                        canvas.height = height * scale;
                        canvas.style.width = width + 'px';
                        canvas.style.height = height + 'px';
                        context.scale(scale, scale);*!/

                        var opts = {
                          /!*  scale: scale,*!/
                            canvas: canvas,
                         /!*   width: width,
                            height: height,
                            dpi: window.devicePixelRatio*!/
                        };
                        html2canvas(shareContent, opts).then(function (canvas) {
                            context.imageSmoothingEnabled = false;
                            context.webkitImageSmoothingEnabled = false;
                            context.msImageSmoothingEnabled = false;
                            context.imageSmoothingEnabled = false;
                            var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
                            dataURIToBlob(imgName, dataUrl, callback);
                        });
                    });*/


                    $("#share-btn").on("click", function () {
                    html2canvas(document.querySelector("#poster-container"),{useCORS: true,allowTaint:true,x:document.querySelector("#poster-container").getBoundingClientRect().left + window.scrollX, y: document.querySelector("#poster-container").getBoundingClientRect().top + window.scrollY}).then(canvas => {
                        var dataUrl = canvas.toDataURL("image/png");
                        var imgName = "share.jpg";
                        dataURIToBlob(imgName, dataUrl, callback);
                    })

                    });



                })

                // edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
                var dataURIToBlob =  function (imgName, dataURI, callback) {
                    var binStr = atob(dataURI.split(',')[1]),
                        len = binStr.length,
                        arr = new Uint8Array(len);

                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }

                    callback(imgName, new Blob([arr]));
                }

                var callback = function (imgName, blob) {
                    var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function () {
                        if (navigator.msSaveBlob) {
                            return navigator.msSaveBlob(blob, imgName);
                        }
                    });
                    triggerDownload[0].click();
                    triggerDownload.remove();
                };

                function addqr()
                {

                    let style=`width: ${image_info.width}; height:  ${image_info.height}; cursor: move; position: absolute; top:  ${image_info.top}; left:  ${image_info.left};`;
                    $html='<div id="box" type="qr" index="2" style="'+style+'"><div id="qr" style="width:100%" > </div>';

                    if( $('.poster').length!==0&&$('#box').length===0) {
                        $('.poster').after($html);
                    }
                    var qrcode = new  QRCode(document.getElementById("qr"), {
                        text: share_url,
                        width:150,
                        height:150,
                        colorDark : "#000000",
                        colorLight : "#ffffff",
                        typeNumber:4,
                        correctLevel : QRCode.CorrectLevel.Q
                    });
                    $('#qr').find('img').css('width','100%');

                    $(document).mousemove(function(e) {
                        if (!!this.move) {
                            var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
                                callback = document.call_down || function() {
                                    $(this.move_target).css({
                                        'top': e.pageY - posix.y,
                                        'left': e.pageX - posix.x
                                    });
                                };

                            callback.call(this, e, posix);
                        }
                    }).mouseup(function(e) {
                        if (!!this.move) {
                            var callback = document.call_up || function(){};
                            callback.call(this, e);
                            $.extend(this, {
                                'move': false,
                                'move_target': null,
                                'call_down': false,
                                'call_up': false
                            });
                        }
                    });

                    $('#box')[0].ondragstart=function () {  //很多浏览器中默认允许拖动图片到新标签页打开，要先禁止，否则影响效果。如果你要拖动的不是图片，可以去掉
                        return false;
                    };
                    $('.poster')[0].ondragstart=function () {
                        return false;
                    };


                    var $box = $('#box').mousedown(function(e) {
                        var offset = $(this).offset();
                        var foffset= $('.poster').offset();
                        console.log(offset)
                        console.log(foffset)
                        console.log(e.pageX)
                        this.posix = {'x': e.pageX - (offset.left-foffset.left), 'y': e.pageY - (offset.top-foffset.top)};
                        $.extend(document, {'move': true, 'move_target': this});
                    }).on('mousedown', '#coor', function(e) {
                        var posix = {
                            'w': $box.width(),
                            'h': $box.height(),
                            'x': e.pageX,
                            'y': e.pageY
                        };

                        $.extend(document, {'move': true, 'call_down': function(e) {
                                $box.css({
                                    'width': Math.max(30, e.pageX - posix.x + posix.w),
                                    'height': Math.max(30, e.pageY - posix.y + posix.h)
                                });
                                console.log(
                                    'width'+ Math.max(30, e.pageX - posix.x + posix.w)+
                                    'height'+Math.max(30, e.pageY - posix.y + posix.h)
                                );

                            }});
                        return false;
                    });

                }





            </script>



        </div>
    </div>


    <script>
        $(document).ready(function () {
            //$('#download_code').attr('download', $('#qr').find('img').attr('src')).show();
        });
    </script>